<template>
    <div class="flex_row">
        <input type="file" ref="inputRef" :accept="props.accept" @change="onChanged" class="ffinput"/>
        <el-button @click="onClickSelect" type="primary">{{ props.text }}</el-button>
    </div>
</template>

<script lang="ts" setup>

import { ref } from 'vue';


interface Props {
    text: string,
    accept: string,
}

const props = defineProps<Props>();
const emit = defineEmits(['input']);
const inputRef = ref<HTMLInputElement | null>(null);

function onClickSelect() {
    inputRef.value?.click();
}

function onChanged(event: Event) {
    const target = event.target as HTMLInputElement;
    const files = target.files;
    if ((files == null) || (files.length == 0)) {
        return;
    }
    const file = files.item(0);
    if (file == null) {
        return;
    }
    target.value = '';
    
    emit('input', file);
}

</script>

<style scoped>

.ffinput {
    display: none;

}

</style>
